//@ts-nocheck
import { useEffect, useRef } from 'react';

import { Button } from 'antd';
import Cron from 'qnn-react-cron';

type CronComponentsType = {
  value?: string;
  onSuccess?: (val: string) => void;
};

const CronComponents = ({ value, onSuccess }: CronComponentsType) => {
  const cronFnsRef = useRef(null);

  useEffect(() => {
    if (value) {
      cronFnsRef.current?.onParse(value + ' *');
    }
  }, [value]);

  return (
    <Cron
      value={value}
      // 配置面板的隐藏, false 即隐藏
      // Configuration panel hiding
      panesShow={{
        second: true,
        minute: true,
        hour: true,
        day: true,
        month: true,
        week: true,
        year: false,
        donTAssign: false
      }}
      // 默认显示哪个面板, 默认为有值且未隐藏的第一个面板 或者 第一个未被隐藏的面板， 设置后将不会自动跳转到有值的面板，而是定死默认显示某个面板
      // Which panel is displayed by default. The default is the first panel that has a value and is not hidden or the first panel that is not hidden. After setting this parameter, the system does not automatically jump to the panel that has a value
      defaultTab={'second'}
      // 未自定义底部按钮时，用户点击确认按钮后的回调
      // The bottom button is not customized when the user clicks the confirm button after the callback
      onOk={(value) => {
        console.log('cron:', value);
      }}
      // 相当于 ref
      // equivalent to ref
      getCronFns={(fns) => {
        // 获取值方法
        // fns.getValue: () => string

        // 解析Cron表达式到UI 调用该方法才可以重新渲染 【一般不使用】(value值改变后组件会自动更新渲染)
        // fns.onParse: () => Promise().then(()=>void).catch(()=>()=>void),
        cronFnsRef.current = fns;
      }}
      // 自定义底部按钮后需要自行调用方法来或者值
      // After customizing the bottom button, you need to call the method or value
      footer={[
        //默认值
        <Button
          key="1"
          style={{ marginRight: 10 }}
          onClick={() => {
            // cronFnsRef.current.onParse('* * * * * ? *');
          }}
        >
          取消
        </Button>,
        <Button
          key="2"
          type="primary"
          onClick={() => {
            const cron = cronFnsRef.current.getValue();
            onSuccess(cron?.slice(0, cron?.length - 2));
          }}
        >
          确定
        </Button>
      ]}
      // onChange 事件，当值改变时触发
      // onChange event, triggered when the value changes
      // @param type = "second" | "minute" | "hour" | "day" | "month" | "week" | "year"
      // @param value = string
      onChange={({ type, value }) => {
        console.log(type, value);
      }}
    />
  );
};

export default CronComponents;
